<!--暂存单管理-->
<template>
  <div>
    <el-breadcrumb class="ne-padding-t-10" separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务受理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="order-temp-box ne-bg-box">
      <div class="temp-table-fill">
        <el-table
            ref="elTable"
            type='index'
            :row-key='getRowKeys'
            :expand-row-keys="expands"
            @row-click="clickTable"
            @expand-change="tableMethod"
            :data="metaDataList"
            style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <DicTable
                  :ref="props.row.children.recode"
                  :columnData="tableColumns"
                  :tableData="props.row.children.tableData"
                  :loading="tableLoading"
                  auto-resize="true"
                  resizable
                  :sync-resize="props.row.children.tableLoading"
                  :currentPage="parseInt(props.row.children.pageInfo.pageIndex)"
                  :pageSize="parseInt(props.row.children.pageInfo.pageSize)"
                  :totalResult="parseInt(props.row.children.pageInfo.rowCount)"
                  :pager="true"
                  @checkbox-change="checkboxchange"
                  @checkbox-all="checkboxAll"
              >
                <template #orderDate="{row}">
                  <p>{{row.hasOwnProperty('orderDate') && row.orderDate ? dataInit(row.orderDate) : dataInit(row.reqOrderDate)}}</p>
                </template>
                <template #operation="{row}">
                  <div class="clearfix operation">
                    <div class="position flex flex-between">
                      <p title="修改" class="modify"><i class="modify el-icon-edit-outline"/>
                      </p>
                      <p title="删除" @click="removeRowEvent(row,props.row.children.recode)" class="delete"><i title="删除" class="delete el-icon-delete-solid"/>
                      </p>
                    </div>
                  </div>
                </template>
              </DicTable>
              <div class="del-all-btn-box">
              <el-button @click="removeCheckbox(props.row.children.recode)" class="del-all-btn" type="primary" plain>删除</el-button>

                <!--                <el-button :disabled="getSelectEvent(props.row.children.recode)" @click="removeCheckbox(props.row.children.recode)" class="del-all-btn" type="primary" plain>删除</el-button>-->
                <span>删除选中</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              label="流水号"
              prop="custSoNumber">
          </el-table-column>
          <el-table-column
              label="订单类型"
              prop="attrValueName">
          </el-table-column>
          <el-table-column
              label="受理日期"
              prop="createDate">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <a class="ne-resave" @click="openDialog(scope.row)"><i class="el-icon-refresh"></i>重新保存</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row type="flex" class="row-bg mar-15" justify="center">
        <el-col :span="10">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="QTtablePage.pageIndex"
              background
              :page-sizes="[5, 10, 15, 20]"
              :page-size="QTtablePage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="QTtablePage.rowCount">
          </el-pagination>
        </el-col>
      </el-row>
      <fix-nav :fix-nav-list="fixNavList"></fix-nav>
    </div>
    <el-dialog
        title="重新保存项目"
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        width="90%"
        top="2.5vh"
    >
      <ResaveProject :pro-info="proinfo" :getTempList="getTempList" :show.sync="dialogVisible"></ResaveProject>
    </el-dialog>
  </div>
</template>
<script>
import DicTable from "@/components/public/DicTable";
import FixNav from "@/components/order/FixNav";
import ResaveProject from "@/components/order/ResaveProject";
import OrderService from "@/api/order/OrderService.js";
import CommonUtil from "@/utils/common";
import { mapState } from "vuex";
export default {
  name: "orderTemp",
  data() {
    return {
      proinfo:{},
      dialogVisible:false,
      expands: [],
      getRowKeys (row) {
        return row.children.recode
      },
      metaDataList:[],
      tableColumns: [
        { type: "checkbox",width: 80,align:'center',fixed: 'left'},
        { field: "custSoNumber", title: "流水号",width:"8%",fixed: 'left'},
        { field: "offerName", title: "销售品名称",width: '10%'},
        { slotName: "orderDate", title: "要求完成时间",width: "10%"},
        { field: "regionRange", title: "通达地点",width: '10%'},
        { field: "serviceOfferName", title: "登记事项",width: '10%'},
        { field: "useCustName", title: "甲端用户名称",width: '15%'},
        { field: "contactName", title: "甲端联系人",width: '8%'},
        { field: "mobilePhone", title: "甲端联系人电话",width: '10%'},
        { field: "addressDesc", title: "甲端装机地址",width:'15%'},
        { field: "zUseCustName", title: "乙端用户名称",width: '15%'},
        { field: "zContactName", title: "乙端联系人",width: '8%'},
        { field: "zMobilePhone", title: "乙端联系人电话",width: '10%'},
        { field: "zAddressDesc", title: "乙端装机地址",width:'15%'},
        { field: "rate", title: "速率",width:'4%'},
        { slotName: "operation", title: "操作",width:'5%',headerAlign:'center',fixed: 'right'},
      ],
      QTtablePage: {
        pageIndex: 1,
        pageSize: 10,
        rowCount: 1
      },
      initTableData: {
        tableData: [],
        tableLoading:true,
        pageInfo: {
          pageIndex: 1,
          pageSize: 10,
          rowCount: 0
        },
      },
      fixNavList:[
        {
          link:'/orderadd',
          name:'订购',
          icon:'iconfont icon-dingyue',
          active: 'true'
        },
        {
          link:'',
          name:'补点',
          clickEvent: 'await',
          icon:'iconfont icon-ding'
        },
        {
          link:'',
          name:'补录',
          clickEvent: 'await',
          icon:'iconfont icon-lurubaogao'
        },
        {
          link:'/custinfo',
          name:'返回',
          icon:'iconfont icon-fanhui'
        },
      ],
      tableLoading:true
    }
  },
  props: {},
  mounted() {
  },
  created() {
    // if(this.$route.params.custId){
    //   this.curMsg.custId = this.$route.params.custId;
    // }
    this.getTempList();
  },
  computed:{
    ...mapState('orders',['orderPosInfo']),
    ...mapState('user',['user'])
  },
  components: {
    DicTable,
    FixNav,
    ResaveProject
  },
  methods: {
    clickTable(row,index,e){
      this.$refs['elTable'].toggleRowExpansion(row);
    },
    dataInit(data){
      return this.$util.dateFormat(data, "yyyy-MM-dd")
    },
    openDialog(row){
      this.dialogVisible = true;
      this.proinfo = row;
    },
    async tableMethod(row,expandedRows){
      let that = this
      this.tableLoading = true;
      if(expandedRows.length>0){
        that.expands = []
        if (row) {
          that.expands.push(row.children.recode)
        }
        // 展开列时
        let {custOrderId,custSoNumber} = row;
        let pageInfo = this.pageInfo(row.children.pageInfo.pageIndex,row.children.pageInfo.pageSize);
        // 临时
        let init = {
          statusCds:'101398',
          handleOrgId:this.user.orgId,
          custId:this.orderPosInfo.custId
        };
        let params = {custOrderId:custOrderId+'',custSoNumber,pageInfo,...this.curMsg};
        Object.assign(params,init);
        const result = await OrderService.getQryOrderItem(params);
        row.children.tableData=result.meta.offerOrderItems;
        row.children.pageInfo.pageIndex = result.meta.pageInfo.pageIndex?result.meta.pageInfo.pageIndex:1;
        row.children.pageInfo.rowCount = result.meta.pageInfo.rowCount?result.meta.pageInfo.rowCount:0;
        this.$refs[row.children.recode].$refs.vxeTable.reloadData(row.children.tableData);
        this.tableLoading= false;
      }else {
        that.expands = []
      };
    },
    async getTempList(){
      let pageInfo=this.pageInfo(this.QTtablePage.pageIndex,this.QTtablePage.pageSize);
      let params = {pageInfo,custId:this.orderPosInfo.custId,createStaff:this.user.staffId,statusCds:101398};
      const result = await OrderService.getQryTempWorkOrderList(params);
      this.QTtablePage.pageIndex = parseInt(result.meta.pageInfo.pageIndex?result.meta.pageInfo.pageIndex:1);
      this.QTtablePage.rowCount = parseInt(result.meta.pageInfo.rowCount?result.meta.pageInfo.rowCount:0);
      this.metaDataList = result.meta.tempStorOrders;
      this.metaDataList.map((ele)=>{
        let recode = CommonUtil.refreshCode();
        return ele['children'] = {recode,...this.initTableData}
      });

    },
    getSelectEvent(code){
      let selectRecords = this.$refs[code].$refs.vxeTable.getCheckboxRecords()
      return selectRecords
    },
    checkboxAll({records}){


    },
    checkboxchange({records}){


    },
    // 删除行
    removeRowEvent(row,code){


      this.$confirm('确认删除订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {

        let params = {};
        if(Array.isArray(row)){
          let idArr = [];
          row.forEach(item=>{
            idArr.push(item.orderItemId);
          });
          params = {
            custSoNumber:row[0].custSoNumber,
            custId:row[0].custId,
            staffId:this.user.staffId,
            orderItemIds:idArr.join(',')
          };
        }else{
          let {custSoNumber,orderItemId,custId} = row;
          params = {custSoNumber,custId,...{orderItemIds:orderItemId,staffId:this.user.staffId}}
        }
        const result = await OrderService.delOrder(params);

        this.$refs[code].$refs.vxeTable.remove(row);
        this.getTempList();
        this.$message({
          type: 'success',
          message: '已删除!'
        });
      });
    },
    // 删除选中
    removeCheckbox(code){
      let selectRecords = this.$refs[code].$refs.vxeTable.getCheckboxRecords();
      if(selectRecords.length>0){
        this.removeRowEvent(selectRecords,code);
      }else{
        this.$confirm('请先选择需要删除的订单', "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: 'warning'
        })
      }

    },
    // 分页
    handleSizeChange(val) {

      this.QTtablePage.pageSize = val;
      this.getTempList();
    },
    handleCurrentChange(val) {
      this.QTtablePage.pageIndex=val;
      this.getTempList();
    },
    pageInfo(cuPage,size){
      return {
          pageIndex:cuPage,
          pageSize:size
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .dic-table-box{
  overflow-y: inherit;
}
.order-temp-box{
  &.ne-bg-box{
    margin:.1rem 0 .2rem 0!important;
  }
  .operation{
    p{
      width: 50%;
      text-align: center;
    }
    i{
      font-size: 18px;
      &.modify{
        color: $blue;
      }
      &.delete{
        color: $red;
      }
    }
  }
  ::v-deep .el-table__expanded-cell[class*=cell] {
    padding: 0.2rem 0.5rem!important;
    background-color: rgba(245,247,250,.9);
    position: relative;
    &:hover{
      background-color: rgba(245,247,250,.9) !important;
    }
  }
  ::v-deep .vxe-table--render-default .vxe-table--body-wrapper, .vxe-table--render-default .vxe-table--footer-wrapper{
    background-color: transparent;
  }
  ::v-deep .vxe-pager,::v-deep .vxe-table--header th, ::v-deep .vxe-table--header tr{
    background-color: transparent;
  }
  .temp-table-fill{
    .ne-resave{
      color: $blue;
      i{
        font-size: $fontSize_v2;
        margin-right: .03rem;
      }
      &:hover{
        text-decoration: underline;
        color: blue;
        i{
          color: blue;
        }
      }
    }
    .del-all-btn-box{
      position: absolute;
      bottom: .2rem;
      left: .8rem;
      color: $textColor3;
      font-size: $fontSize_info;
      button{
        height: .31rem;
        line-height: .31rem;
      }
      span{
        margin-left: .1rem;
      }
    }
  }
  ::v-deep .vxe-header--column .vxe-cell--title{
    font-weight: 500;
  }
  ::v-deep .vxe-pager.size--medium{
    padding-top: .1rem;
  }
  ::v-deep .el-table th, ::v-deep .el-table td{
    padding: .15rem 0!important;
  }
}
</style>
